<template>
	<div class="father-container">
		<h3>父组件</h3>
		<p>message:{{message}}</p>
		<p>userinfo:{{userinfo}}</p>
	    <p>FatherCount:{{FatherCount}} [接收子组件的值]</p>
	   
		<hr>
		 <div class="box">
			  <!-- 子组件 -->
			  <!-- msg：是子组件里的自定属性，用来将父组件的值传给子组件的message属性 -->
			  <SonData :message="message" :userinfo="userinfo"></SonData>
		 </div>
		
		   
		  <div class="box">
	      <!-- 子组件2 -->
		  <SonData2 @numChange="getCount"></SonData2>	
		  </div>
		 
	</div>
</template>

<script>
	
	import SonData from '@/components/SonData.vue'
	import SonData2 from '@/components/SonData2.vue'
	
	export default{
		data(){
			return {
				message:'今天是情人节',
				userinfo:{name:'tom',age:20},
				FatherCount:''
			}
		},
		components:{
			SonData,
			SonData2
		},
		methods:{
			getCount(val){
				this.FatherCount = val
			}
		}
	}
</script>

<style lang="less" scoped="">
	.father-container{
		padding: 1px 20px 20px;
		background-color: #efefef;
	}
	
	.box{
		display: flex;
	}
</style>
